<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'SevendayForcast',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: ''
    }
  },
  created() {
    this.uniqueID = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale

    var option = {
      title: null,
      tooltip: null,
      legend: {
        data: [{
          name: '最低温度',
          textStyle: {
            color: '#FFFD9B',
            fontSize: 24 * scale
          }
        }, {
          name: '最高温度',
          textStyle: {
            color: '#5BFBCC',
            fontSize: 24 * scale
          }
        }, {
          name: '平均温度',
          textStyle: {
            color: '#4FC7FF',
            fontSize: 24 * scale
          }
        }],
        right: 0
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#A0C8DB',
              fontSize: 20 * scale
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4FC7FF'
            }
          },
          data: ['05-15', '05-16', '05-17', '05-18', '05-19', '05-10', '05-21']
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#A0C8DB',
              fontSize: 20 * scale
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4FC7FF'
            }
          }
        }
      ],
      series: [
        {
          name: '最低温度',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#FFFD9B',
              lineStyle: {
                color: '#FFFD9B',
                width: 1
              },
              areaStyle: {
                color: '#FFFD933B',
                zlevel: 2
              }
            }
          },
          data: [11, 15, 13, 15, 16, 14, 18],
          zlevel: 3,
          symbol: 'circle'
        },
        {
          name: '最高温度',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#5BFBCC',
              lineStyle: {
                color: '#5BFBCC',
                width: 1
              },
              areaStyle: {
                color: 'rgba(91, 251, 204, 0.2)'
              }
            }
          },
          data: [20, 19, 21, 22, 23, 25, 26],
          zlevel: 2,
          symbol: 'circle'
        },
        {
          name: '平均温度',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#4FC7FF',
              lineStyle: {
                color: '#4FC7FF',
                width: 1
              },
              areaStyle: {
                color: 'rgba(79, 199, 255, 0.2)',
                zlevel: 0
              }
            }
          },
          data: [26, 22, 22, 30, 25, 35, 29],
          zlevel: 1,
          symbol: 'circle'
        }
      ]
    }

    myChart.setOption(option)

    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
